<template>
  <div class="card m5 p10 flex_col">
    <label class="flex_center_self">喷嘴控制</label>
    <div class="flex_row_center mt5">
      <label>离零点距离:</label>
      <el-input v-model="ctx.value" style="width:80px;" />
      <label class="ml5">mm</label>
    </div>
    <div class="flex_row flex_center_justify mt5">
      <el-button @click="onClickCtrl" type="primary">控制</el-button>
      <el-button @click="onClickReset" type="primary">复位</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import { reactive } from 'vue';
import { runAction } from '../utils/ui';
import service from '../service/service';

interface Ctx {
  value: string;
}

const ctx = reactive<Ctx>({
  value: '0'
});

async function onClickReset() {
  runAction('复位', '喷嘴复位', async () => {
    await service.nozzleCtrl(0);
  });
}

async function onClickCtrl() {
  runAction('喷嘴', '喷嘴控制', async () => {
    const v = parseInt(ctx.value);
    await service.nozzleCtrl(v);
  });
}

</script>
